<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>{$templateTitle}</title>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/home/css/chat.css" />
    <script src="__PUBLIC__/home/js/jquery.js"></script>
    <script src="__PUBLIC__/vendors/layer/mobile/layer.js"></script>
    <style>
        .show .time{
            text-align: right;padding-right: 55px;position: relative;top: 15px;
        }
        .show .msg img, .send .msg img{
            width: 3rem;
        }
        .show .msg p, .send .msg p{
            margin-top: 12px;max-width: none;
        }
        .send .time{
            text-align: left;
            padding-left: 55px;
            position: relative;top: 15px;
        }
    </style>
</head>
<body>
<div class="message" style="padding-bottom: 2rem;">
    {foreach $list as $item}
    {if $item.send_id eq 0}
    <div class="show">
        <div class="time">{:date('m-d H:i', $item.create_time)}</div>
        <div class="msg">
            <img src="{$avatar}" alt=""/>
            <p>
                {if $item.type eq 1}
                <i class="msg_input"></i>{$item.content}
                {else}
                <img src='{$item.content}' alt='' style='width: 120px;'>
                {/if}
            </p>
        </div>
    </div>
    {else}
    <div class="send">
        <div class="time">{:date('m-d H:i', $item.create_time)}</div>
        <div class="msg">
            <img src="{$logo}" alt="" style="width: 3rem;"/>
            <p style="margin-top: 12px;max-width: none;">
                {if $item.type eq 1}
                <i class="msg_input"></i>{$item.content}
                {else}
                <img src='{$item.content}' alt='' style='width: 120px;'>
                {/if}
            </p>
        </div>
    </div>
    {/if}
    {/foreach}
</div>
<div class="footer" style="height: 2rem;">
    <input type="text" style="width: 80%;height: 2rem;" />
    <p style="width: 2.3rem;height: 2rem;line-height: 2rem;margin: 0;cursor: pointer;">发送</p>
    <label for="img" style="float: right;height: 2rem;background: #ddd;width: 2.3rem;text-align: center;line-height: 2rem;color: white;margin-right: 1px; cursor: pointer;">图片</label>
    <form action="" enctype="multipart/form-data" id="img_form">
        <input type="hidden" name="user_id" value="{$user_id}">
        <input type="file" style="display: none;" name="file" onchange="send_img()" id="img">
    </form>
</div>
</body>
<script>
    var avatar = "{$avatar}", logo="{$logo}", last_id="{$last_id}", user_id="{$user_id}";

    /*发送消息*/
    function send(headSrc,str, type){
        if(type == 1){
            var html="<div class='send'><div class='msg'><img src="+headSrc+" />"+
                "<p><i class='msg_input'></i>"+str+"</p></div></div>";
        }else{
            var html="<div class='show'><div class='msg'><img src="+headSrc+" />"+
                "<p><img src='"+str+"' alt='' style='width: 120px;'></p></div></div>";
        }
        upView(html);
    }
    /*接受消息*/
    function show(headSrc,str, type){
        if(type == 1){
            var html="<div class='show'><div class='msg'><img src="+headSrc+" />"+
                "<p><i class='msg_input'></i>"+str+"</p></div></div>";
        }else{
            var html="<div class='show'><div class='msg'><img src="+headSrc+" />"+
                "<p><img src='"+str+"' alt='' style='width: 120px;'></p></div></div>";
        }
        upView(html);
    }
    /*更新视图*/
    function upView(html){
        $('.message').append(html);
        $('html,body').animate({ "scrollTop":($('.message').outerHeight()-window.innerHeight)},200);
        $('.footer p').prev().val("");
    }
    $(function(){
        $('.footer').on('keyup','input',function(){
            if($(this).val().length>0){
                $(this).next().css('background','#114F8E').prop('disabled',true);

            }else{
                $(this).next().css('background','#ddd').prop('disabled',false);
            }
        })
        $('.footer p').click(function(){
            let con = $(this).prev().val();
            $.post("{:url('send_msg')}", {con:con, user_id:user_id}, function (res) {
                if(res.status == 0){
                    // last_id = res.result_data;
                    show(avatar,con, 1);
                }else{
                    layer.open({
                        content:'发送失败',
                        skin:"msg",
                        time:1
                    })
                }
            });

        })
        setInterval(function () {
            getChat();
        }, 3000);
    })
    //发送图片
    function send_img() {
        $.ajax({
            url: "{:url('Chat/send_img')}",
            type: "post",
            dataType: "json",
            cache: false,
            data: new FormData($("#img_form")[0]),
            processData: false,// 不处理数据
            contentType: false, // 不设置内容类型
            success: function(data){
                console.log(data);
                if(data.status == 0){
                    show(avatar, data.data, 2);
                }else{
                    layer.open({
                        content:'发送失败',
                        skin:"msg",
                        time:2
                    })
                }

            }

        })
    }

    /**
     * 获取聊天记录
     */
    function getChat(){
        $.post("{:url('getChatList')}", {last_id:last_id, user_id:user_id}, function (res) {
            let msg_data = res.data.msg_data;
            if(!isNaN(res.data.last_id) && parseInt(res.data.last_id)>0){
                last_id = res.data.last_id;
            }
            $.each(msg_data, function (i,v) {
                send(logo, v.content, v.type);
            })
        });
    }
</script>
</html>
